<!-- 部门协作费比例 -->
<script lang="ts" setup>
	import { onMounted, getCurrentInstance, ref, reactive, toRefs } from "vue";
	import { listRczz, getRczz, exportRczz } from "@/api/system/rczz";
	import { deptTreeSelect } from "@/api/role";

	let isDialogVisible = ref(false);
	const loading = ref(true);
	const { proxy } = getCurrentInstance();
	const total = ref(0);
	const dateRangeEndTime = ref();
	
	let CsItems = ref([]);
	let value1 = ref('');
	let value2 = ref('');
	let value3 = ref('');
	let value4 = ref('');
	let value5 = ref('');
	let value6 = ref('');
	let value7 = ref('');
	let value8 = ref('');
	let value9 = ref('');
	let value10 = ref('');

	let headers = [
		{ title: "序号", sortable: false, key: "" },
		{ title: "部门", sortable: false, key: "" },
		{ title: "服务费", sortable: false, key: "" },
		{ title: "标书款", sortable: false, key: "" },
		{ title: "合计(部门招标收入)", sortable: false, key: "" },
		{ title: "项目已支付协作费", sortable: false, key: "" },
		{ title: "已支付比例", sortable: false, key: "" },
		{ title: "流程中", sortable: false, key: "" },
		{ title: "支付比例", sortable: false, key: "" },
		{ title: "操作", sortable: false, key: "" },
	];

	let Data = ref([]);
	const data = reactive({
		queryParams: {
			company: "",
			pageNum: 1,
			pageSize: 10,
			paymentOrderFlag: undefined,
			serialNumber: undefined,
			agent: undefined,
			agentDept: undefined,
			paymentAmount: undefined,
			paymentAmountStart: "",
			paymentAmountEnd: "",
			paymentMethod: undefined,
			voucherNumber: undefined,
			params: {
				endTime: undefined,
			},
		},
	});

	const { queryParams } = toRefs(data);
	//获取列表
	const getList = async () => {
		loading.value = true;
		queryParams.value.params = {};
		proxy?.addDateRange(queryParams.value, dateRangeEndTime.value, "EndTime");
		const res = await listRczz(queryParams.value);
		Data.value = res.rows;
		Data.value.forEach((item) => {
			switch (item.state) {
				case 0:
					item.stateC = "未结束";
					break;
				case 1:
					item.stateC = "已结束";
					break;
			}
		});
		total.value = res.total;
		loading.value = false;
	};

	/** 搜索按钮操作 */
	const handleQuery = () => {
		console.log(queryParams.value, "queryParams.value");
		getList();
	};

	/* 导出 */
	const ExportCik = async () => {
		proxy?.addDateRange(queryParams.value, dateRangeEndTime.value, "EndTime");
		console.log("queryParams：", queryParams.value);
		proxy?.download(
			/* 'http://192.168.2.158:8080/system/rczz/export', */
			'/system/rczz/export',
			{
				...queryParams.value
			},
			`日常转账_${new Date().getTime()}.xlsx`
		);
	};

	const Resetting = () => {
		queryParams.value = {
			company: "",
			pageNum: 1,
			pageSize: 10,
			paymentOrderFlag: undefined,
			serialNumber: undefined,
			agent: undefined,
			agentDept: undefined,
			paymentAmount: undefined,
			paymentMethod: undefined,
			voucherNumber: undefined,
		};
		dateRangeEndTime.value = "";
		getList();
	};
	/** 查询部门下拉树结构 */
	const getTreeSelect = async () => {
		const res = await deptTreeSelect();
		companyNameList.value = res.data;
	};
	const handleSizeChange = (e) => {
		queryParams.value.pageSize = e;
		getList();
	};
	const handleCurrentChange = (w) => {
		// queryParams.value.pageNum = w;
		console.log(w, "翻页");
		getList();
	};
	/**
	 * 详情
	*/
	const handleView = async (row) => {
		const res = await getRczz(row.id);
		window.open(res.data, "_blank");
	};
	onMounted(() => {
		// getList();
		// getTreeSelect();
	});
</script>

<template>
	<VCard>
		<VCardText class="py-10">
			<VRow class="match-height">
				<VCol cols="12" md="3">
					<AppSelect :items="CsItems" item-title="label" item-value="value"
						v-model="value1" label="部门" placeholder="请选择部门" density="compact" />
				</VCol>
				<VCol cols="12" md="3">
					<VRow class="match-height">
						<VCol cols="12" md="5">
							<AppTextField v-model="value5" label="服务费" placeholder="请输入金额"
								type="number" density="compact" />
						</VCol>
				
						<div class="display_flex-end" style="padding-bottom: 15px">～</div>
				
						<VCol cols="12" md="5">
							<AppTextField v-model="value6" label=" " placeholder="请输入金额"
								type="number" density="compact" />
						</VCol>
					</VRow>
				</VCol>	
				<VCol cols="12" md="3">
					<VRow class="match-height">
						<VCol cols="12" md="5">
							<AppTextField v-model="value7" label="标书款" placeholder="请输入金额"
								type="number" density="compact" />
						</VCol>
				
						<div class="display_flex-end" style="padding-bottom: 15px">～</div>
				
						<VCol cols="12" md="5">
							<AppTextField v-model="value8" label=" " placeholder="请输入金额"
								type="number" density="compact" />
						</VCol>
					</VRow>
				</VCol>
				<VCol cols="12" md="3">
					<VRow class="match-height">
						<VCol cols="12" md="5">
							<AppTextField v-model="value9" label="项目已支付协作费" placeholder="请输入金额"
								type="number" density="compact" />
						</VCol>
				
						<div class="display_flex-end" style="padding-bottom: 15px">～</div>
				
						<VCol cols="12" md="5">
							<AppTextField v-model="value10" label=" " placeholder="请输入金额"
								type="number" density="compact" />
						</VCol>
					</VRow>
				</VCol>
				<VCol cols="12" md="3">
					<VRow class="match-height">
						<VCol cols="12" md="5">
							<AppTextField v-model="value9" label="已支付比例" placeholder="请输入比例"
								type="number" density="compact" />
						</VCol>
				
						<div class="display_flex-end" style="padding-bottom: 15px">～</div>
				
						<VCol cols="12" md="5">
							<AppTextField v-model="value10" label=" " placeholder="请输入比例"
								type="number" density="compact" />
						</VCol>
					</VRow>
				</VCol>
				<VCol cols="12" md="3">
					<VRow class="match-height">
						<VCol cols="12" md="5">
							<AppTextField v-model="value9" label="流程中协作费" placeholder="请输入金额"
								type="number" density="compact" />
						</VCol>
				
						<div class="display_flex-end" style="padding-bottom: 15px">～</div>
				
						<VCol cols="12" md="5">
							<AppTextField v-model="value10" label=" " placeholder="请输入金额"
								type="number" density="compact" />
						</VCol>
					</VRow>
				</VCol>
				<VCol cols="12" md="3">
					<VRow class="match-height">
						<VCol cols="12" md="5">
							<AppTextField v-model="value9" label="已支付与未支付比例" placeholder="请输入比例"
								type="number" density="compact" />
						</VCol>
				
						<div class="display_flex-end" style="padding-bottom: 15px">～</div>
				
						<VCol cols="12" md="5">
							<AppTextField v-model="value10" label=" " placeholder="请输入比例"
								type="number" density="compact" />
						</VCol>
					</VRow>
				</VCol>
				
				<VCol cols="12" md="2" class="display_flex-end">
					<VBtn color="primary" density="compact" @click="handleQuery">
						查询
					</VBtn>

					<VBtn variant="outlined" density="compact" @click="Resetting">
						重置
					</VBtn>

					<VBtn color="primary" density="compact" @click="ExportCik">
						导出
					</VBtn>
				</VCol>

				<VCol cols="12" md="12" class="myTableFiex">
					<VDataTable :headers="headers" :items="Data" :items-per-page="queryParams.pageSize"
						:page="queryParams.pageNum" class="text-no-wrap">
						<template #item.actions="{ item }">
							<div class="d-flex gap-1 position_a cction">
								<IconBtn @click="handleView(item)">
									<VIcon>
										<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye"
											width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5"
											stroke="rgb(var(--v-theme-primary))" fill="none" stroke-linecap="round"
											stroke-linejoin="round">
											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
											<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
											<path
												d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
										</svg>
									</VIcon>
								</IconBtn>
							</div>
						</template>
					</VDataTable>
					<div class="mypagination">
						<el-pagination v-model:current-page="queryParams.pageNum"
							v-model:page-size="queryParams.pageSize" :page-sizes="[10, 25, 50, 100]"
							layout="total, sizes, prev, pager, next, jumper" :total="total"
							@size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</div>
				</VCol>
				<VCol cols="12" md="12"> </VCol>
				<VDialog v-model="isDialogVisible" width="500">
					<!-- Dialog close btn -->
					<DialogCloseBtn @click="isDialogVisible = !isDialogVisible" />

					<!-- Dialog Content -->
					<VCard title="详情">
						<VCardText> </VCardText>

						<!-- <VCardText class="d-flex justify-end">
				        <VBtn @click="isDialogVisible = false">
				          I accept
				        </VBtn>
				      </VCardText> -->
					</VCard>
				</VDialog>
			</VRow>
		</VCardText>
	</VCard>
</template>

<style lang="scss">
	@use "@core/scss/template/libs/apex-chart.scss";

	.demonstration {
		color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
		font-size: 13px;
	}

	.display_flex-end {
		display: flex;
		align-items: flex-end;
		gap: 15px;
	}

	.el-picker-panel {
		background-color: rgb(var(--v-theme-surface)) !important;
	}

	.custom-date-picker {
		background-color: rgb(var(--v-theme-surface));
		inline-size: 100%;
	}

	.el-input__wrapper {
		background-color: rgb(var(--v-theme-surface)) !important;
	}

	.el-picker-panel__footer {
		background-color: rgb(var(--v-theme-surface)) !important;
	}

	.el-select__wrapper {
		background-color: rgb(var(--v-theme-surface)) !important;
	}

	.myTableFiex {
		.v-data-table__tr td:nth-last-child(1) {
			position: sticky !important;
			position: -webkit-sticky !important;
			inset-inline-end: 0;
			z-index: 0;
			background: rgb(var(--v-theme-surface));
		}

		thead>tr>.v-data-table__td:nth-last-child(1) {
			position: sticky !important;
			position: -webkit-sticky !important;
			inset-inline-end: 0;
			z-index: 0;
			background: rgb(var(--v-theme-surface));
		}
	}
</style>